<template>
    <div class="dy_navigation_container">
        <div class="dy_logo">
            <!-- <img src="@/assets/pulicIcon/dylogo_white.svg"> -->
        </div>
        <div class="navigation_list">
            <div v-for="item in 20" :key="item">首页{{ item }}</div>
        </div>
        <div class="navigation_foot">12332</div>
    </div>
</template>


<script setup>



</script>

<style lang="scss" scoped>

@media (max-width: 1230px) {

    //小于1230px的样式
    .dy_navigation_container {
        width: 72px;
        .dy_logo {
            background: url('@/assets/pulicIcon/dylogo_small.svg');
            height: 68px;
            background-repeat: no-repeat;
            background-position: 22px;
        }
    }
}

@media (min-width: 1230px) {

    //大于1230px的样式
    .dy_navigation_container {
        width: 160px;

        .dy_logo {
            background: url('@/assets/pulicIcon/dylogo_white.svg');
            height: 68px;
            background-repeat: no-repeat;
            background-position: 32px;
        }
        .navigation_foot{
            height: 87px;
            border-top: 1px solid #1f212c;
        }
    }
}

.dy_navigation_container {
    height: 100%;
    color: #ffffff99;
    display: flex;
    flex-direction: column;
    .navigation_list{
        flex: 1;
    }
}

</style>